import React from "react";
import { Form, Input, Button,  Row, Col } from "antd";
import request from "@/utils/request";

function Login(props) {
  const rules = {
    username: [
      {
        required: true,
        message: "请输入密码",
      },
    ],
    password: [
      {
        required: true,
        message: "请输入用户名",
      },
    ],
  };
  const onFinish = function (values) {
    console.log("values", values);
    request
      .get("/user/login", {
        params: values,
      })
      .then(({ data }) => {
        console.log("data", data);
        const { code } = data;
        if (code === 200) {
          localStorage.setItem("userInfo", JSON.stringify(data.data));
          //  跳到后台管理系统
          props.history.push("./manage");
        }
      });
  };
  return (
    <div
      style={{
        textAlign: "center",
        backgroundColor: "#067785",
        height: "100%",
        width: "100%",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <h1
        style={{
          fontSize: 30,
          color: "#fff",
          fontWeight: 900,
        }}
      >
        博客后台管理系统
      </h1>
      <div
        style={{
          width: 433,
          height: 286,
          backgroundColor: "#fff",
          padding: 30,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <Form
          name="basic"
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 16,
          }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Row>
            <Col>
              <Form.Item label="用户名" name="username" rules={rules.username}>
                <Input style={{ width: 300 }} />
              </Form.Item>
            </Col>
          </Row>

          <Row>
            <Col>
              <Form.Item label="密码" name="password" rules={rules.password}>
                <Input.Password style={{ width: 300 }} />
              </Form.Item>
            </Col>
          </Row>

          <Form.Item
            wrapperCol={{
              offset: 4,
              span: 16,
            }}
          >
            <Button
              style={{
                backgroundColor: "rgb(62 171 184)",
                color: "#fff",
                width: 120,
                marginBottom: 0,
                fontSize: 16,
                border: "none",
                marginTop: 10,
              }}
              htmlType="submit"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
export default Login;
